<template>
	<common-card class="portal_pending_completed">
		<template #header>
			<a-radio-group size="large" default-value="1">
				<a-radio value="1">
					<template #radio="{ checked }">
						<a-tag size="large" :checked="checked" checkable>待办事项</a-tag>
					</template>
				</a-radio>
				<a-radio value="2">
					<template #radio="{ checked }">
						<a-tag size="large" :checked="checked" checkable>已办事项</a-tag>
					</template>
				</a-radio>
			</a-radio-group>
		</template>
		<template #more><a-button type="text">更多</a-button></template>
		<a-link href="link">
			<template #icon>
				<icon-edit />
			</template>
			<dl>
				<dt>程序设计基础（C&C++）备课教案</dt>
				<dd>
					<span>待处理</span>
					<span>2022-08-31</span>
				</dd>
			</dl>
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-edit />
			</template>
			<dl>
				<dt>程序设计基础（C&C++）备课教案</dt>
				<dd>
					<span>待处理</span>
					<span>2022-08-31</span>
				</dd>
			</dl>
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-edit />
			</template>
			<dl>
				<dt>程序设计基础（C&C++）备课教案</dt>
				<dd>
					<span>待处理</span>
					<span>2022-08-31</span>
				</dd>
			</dl>
		</a-link>
		<a-link href="link">
			<template #icon>
				<icon-edit />
			</template>
			<dl>
				<dt>程序设计基础（C&C++）备课教案</dt>
				<dd>
					<span>待处理</span>
					<span>2022-08-31</span>
				</dd>
			</dl>
		</a-link>
		<!-- <a-link href="link">
			<template #icon>
				<icon-edit />
			</template>
			<dl>
				<dt>程序设计基础（C&C++）备课教案</dt>
				<dd>
					<span>待处理</span>
					<span>2022-08-31</span>
				</dd>
			</dl>
		</a-link> -->
	</common-card>
</template>

<script lang="ts" setup>
import commonCard from '../commonCard.vue';
defineOptions({ name: 'PendingCompleted' });
</script>

<style lang="scss" scoped>
.portal_pending_completed {
	&:deep(.arco-card-body) {
		gap: 10px;
		flex-direction: column;
		padding: 12px !important;
	}
	.arco-link {
		padding: 12px;
		border-radius: 4px;
		justify-content: flex-start;
		border: solid 1px var(--w-e-toolbar-border-color);
		background-color: var(--w-e-textarea-slight-bg-color);
	}
	&:deep(.arco-link-icon) {
		width: 38px;
		height: 38px;
		flex-shrink: 0;
		border-radius: 50%;
		background-color: var(--w-e-textarea-handler-bg-color);
		margin-right: 10px;
		text-align: center;
		line-height: 38px;
		font-size: 20px;
		color: #fff;
	}
	dl {
		flex: 1;
		overflow: hidden;
	}
	dt {
		font-size: 16px;
		line-height: 1;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		color: var(--w-e-textarea-color);
	}
	dd {
		display: flex;
		align-items: center;
		justify-content: space-between;
		color: var(--w-e-toolbar-disabled-color);
		margin-top: 12px;
		font-size: 12px;
		line-height: 1;
	}
}
</style>
